<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>威客任务 - 技能交易平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #2C6ECB;
      --primary-light: #E8F0FE;
      --success: #36B37E;
      --warning: #FFAB00;
      --danger: #FF5630;
      --text-primary: #172B4D;
      --text-secondary: #6B778C;
      --border-light: #E5E8EF;
      --bg-white: #FFFFFF;
      --bg-light: #F4F5F7;
      --gray-100: #F9FAFC;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      padding-bottom: 60px;
      margin: 0;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 20px;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 16px 12px 45px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--gray-100);
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }
    
    /* 筛选工具栏 */
    .filter-toolbar {
      background-color: var(--bg-white);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-light);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .filter-toolbar::-webkit-scrollbar {
      display: none;
    }
    
    .filter-options {
      display: flex;
      gap: 10px;
      padding-bottom: 5px;
      white-space: nowrap;
    }
    
    .filter-option {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      border: 1px solid var(--border-light);
      background-color: white;
      color: var(--text-primary);
    }
    
    .filter-option.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 任务列表 */
    .tasks-container {
      padding: 10px 16px;
    }
    
    .task-item {
      background-color: var(--bg-white);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      border: 1px solid var(--border-light);
      text-decoration: none;
      color: var(--text-primary);
      display: block;
    }
    
    /* 无图任务样式 */
    .task-no-image {
      padding: 16px;
    }
    
    /* 单图任务样式 */
    .task-single-image {
      display: flex;
      gap: 12px;
    }
    
    .task-single-image .task-media {
      width: 100px;
      flex-shrink: 0;
    }
    
    .task-single-image .task-content {
      flex: 1;
      padding: 16px 16px 16px 0;
    }
    
    .task-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px 0 0 10px;
    }
    
    /* 多图任务样式 */
    .task-multi-image {
      padding: 16px;
    }
    
    .task-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .multi-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    /* 任务内容通用样式 */
    .task-category {
      display: inline-block;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
      margin-bottom: 8px;
    }
    
    .task-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .task-price {
      font-size: 16px;
      font-weight: 600;
      color: var(--danger);
    }
    
    .task-info {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .task-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 紧急任务标识 */
    .urgent-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--danger);
      margin-left: 8px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布任务按钮 */
    .fab-button {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(44, 110, 203, 0.3);
      border: none;
      z-index: 90;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <button class="header-btn" id="backBtn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="header-title">威客任务</div>
    <button class="header-btn">
      <i class="fa fa-bell-o"></i>
    </button>
  </div>
  
  <!-- 搜索区域 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索任务关键词、技能...">
    </div>
  </div>
  
  <!-- 筛选工具栏 -->
  <div class="filter-toolbar">
    <div class="filter-options">
      <button class="filter-option active">全部任务</button>
      <button class="filter-option">设计创意</button>
      <button class="filter-option">文案写作</button>
      <button class="filter-option">程序开发</button>
      <button class="filter-option">视频制作</button>
      <button class="filter-option">营销推广</button>
      <button class="filter-option">生活服务</button>
      <button class="filter-option">紧急任务</button>
    </div>
  </div>
  
  <!-- 任务列表 -->
  <div class="tasks-container">
    <!-- 无图任务 -->
    <a href="#" class="task-item task-no-image">
      <span class="task-category">文案写作</span>
      <h3 class="task-title">公众号推文撰写，每周2篇，长期合作</h3>
      <p class="task-desc">需要为科技类公众号撰写产品评测和行业分析文章，要求文字流畅，有自己的观点，熟悉科技领域优先考虑。</p>
      <div class="task-meta">
        <div class="task-price">¥200/篇</div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 长期</span>
          <span class="task-tag"><i class="fa fa-map-marker"></i> 线上</span>
        </div>
      </div>
    </a>
    
    <!-- 单图任务 -->
    <a href="#" class="task-item task-single-image">
      <div class="task-media">
        <img src="https://picsum.photos/300/300?random=1" alt="Logo设计任务" class="task-image">
      </div>
      <div class="task-content">
        <span class="task-category">设计创意</span>
        <h3 class="task-title">奶茶店Logo设计，要求清新可爱风格</h3>
        <p class="task-desc">新开奶茶店需要设计品牌Logo，风格要清新可爱，符合年轻人审美，需要提供3-5个方案供选择。</p>
        <div class="task-meta">
          <div class="task-price">¥500
            <span class="urgent-tag"><i class="fa fa-fire"></i> 紧急</span>
          </div>
          <div class="task-info">
            <span class="task-tag"><i class="fa fa-clock-o"></i> 3天</span>
            <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
          </div>
        </div>
      </div>
    </a>
    
    <!-- 多图任务 -->
    <a href="#" class="task-item task-multi-image">
      <span class="task-category">程序开发</span>
      <h3 class="task-title">小程序开发，类似外卖点餐系统</h3>
      <div class="task-images">
        <img src="https://picsum.photos/300/300?random=10" alt="小程序截图1" class="multi-image">
        <img src="https://picsum.photos/300/300?random=11" alt="小程序截图2" class="multi-image">
        <img src="https://picsum.photos/300/300?random=12" alt="小程序截图3" class="multi-image">
      </div>
      <p class="task-desc">需要开发一个餐饮外卖小程序，包含商品展示、购物车、下单支付、订单管理等功能，参考截图中的界面风格。</p>
      <div class="task-meta">
        <div class="task-price">¥8000</div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 30天</span>
          <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
        </div>
      </div>
    </a>
    
    <!-- 无图任务 -->
    <a href="#" class="task-item task-no-image">
      <span class="task-category">生活服务</span>
      <h3 class="task-title">寻找北京朝阳区宠物寄养，春节期间照顾猫咪</h3>
      <p class="task-desc">春节回老家，需要找人照顾2只布偶猫，时间从1月20日到2月10日，要求有养宠经验，每天喂食换水清理猫砂。</p>
      <div class="task-meta">
        <div class="task-price">¥30/天</div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 22天</span>
          <span class="task-tag"><i class="fa fa-map-marker"></i> 朝阳</span>
        </div>
      </div>
    </a>
    
    <!-- 多图任务 -->
    <a href="#" class="task-item task-multi-image">
      <span class="task-category">视频制作</span>
      <h3 class="task-title">产品宣传视频剪辑，1分钟左右</h3>
      <div class="task-images">
        <img src="https://picsum.photos/300/300?random=20" alt="产品图1" class="multi-image">
        <img src="https://picsum.photos/300/300?random=21" alt="产品图2" class="multi-image">
        <img src="https://picsum.photos/300/300?random=22" alt="参考视频截图" class="multi-image">
      </div>
      <p class="task-desc">为新款智能手表制作宣传视频，时长60秒左右，需要包含产品功能展示和使用场景，参考苹果产品宣传视频风格。</p>
      <div class="task-meta">
        <div class="task-price">¥1500
          <span class="urgent-tag"><i class="fa fa-fire"></i> 紧急</span>
        </div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 7天</span>
          <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
        </div>
      </div>
    </a>
    
    <!-- 单图任务 -->
    <a href="#" class="task-item task-single-image">
      <div class="task-media">
        <img src="https://picsum.photos/300/300?random=2" alt="营销推广任务" class="task-image">
      </div>
      <div class="task-content">
        <span class="task-category">营销推广</span>
        <h3 class="task-title">小红书笔记代发，推广新款护肤品</h3>
        <p class="task-desc">需要在小红书发布产品使用笔记，账号粉丝1万以上，内容原创，配图美观，有护肤品推广经验者优先。</p>
        <div class="task-meta">
          <div class="task-price">¥100/篇</div>
          <div class="task-info">
            <span class="task-tag"><i class="fa fa-clock-o"></i> 长期</span>
            <span class="task-tag"><i class="fa fa-user-o"></i> 多人</span>
          </div>
        </div>
      </div>
    </a>
  </div>
  
  <!-- 发布任务按钮 -->
  <button class="fab-button">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>任务</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-exchange nav-icon"></i>
      <span>交易</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', function() {
      history.back();
    });
    
    // 筛选选项切换
    document.querySelectorAll('.filter-option').forEach(option => {
      option.addEventListener('click', function() {
        document.querySelectorAll('.filter-option').forEach(opt => {
          opt.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      console.log('搜索任务:', searchTerm);
      // 实际应用中可以在这里添加筛选任务的逻辑
    });
    
    // 发布任务按钮
    document.querySelector('.fab-button').addEventListener('click', function() {
      alert('发布新任务');
    });
    
    // 底部导航切换
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>
